<template>
    <!-- 用户详情组件 -->
    <ContentPanel>
        <div class="user-info">
            <UserBaseInfo :userInfo="userInfo"></UserBaseInfo>
            <!-- 操作按钮 -->
            <div class="more-op">
                <el-dropdown placement="bottom-end" trigger="click">
                    <span class="el-dropdown-link">
                        <div class="iconfont icon-gengduo"></div>
                    </span>
                    <template #dropdown>
                        <el-dropdown-item @click="blockContact">加入黑名单</el-dropdown-item>
                        <el-dropdown-item @click="delContact">删除联系人</el-dropdown-item>
                    </template>
                </el-dropdown>
            </div>
        </div>
        <div class="part-item">
            <div class="part-title">个性签名</div>
            <div class="part-content">{{ userInfo.personalSignature || '-' }}</div>
        </div>
        <div class="send-message" @click="sendMessage">
            <div class="iconfont icon-faxiaoxi"></div>
            <div class="text">发消息</div>
        </div>
    </ContentPanel>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
const { proxy } = getCurrentInstance();
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const userInfo = ref({});
const loadUserDetail = async (contactId) => {
    let result = await proxy.Request({
        method: "get",
        url: proxy.Api.getContactDetailInfo,
        params: {
            contactId: contactId,
        }
    })
    if (!result) {
        return;
    }
    userInfo.value = result.data;
}

/* 监听路由带的参数的变化改变右侧数据（因为不是每个用户一个路由，而是同一个路由的组件，靠参数来改变右侧的数据） */
watch(
    () => route.query.contactId,
    (newValue, oldVale) => {
        if (newValue) {
            loadUserDetail(newValue);
        }
    },
    { immediate: true, deep: false }
)

import { useContactStateStore } from "@/stores/contactStateStore";
const contactStateStore = useContactStateStore();

/* 删除/拉黑联系人后需要删除联系人并刷新联系人列表 */
const delContactData = (contactId) => {
    contactStateStore.setContactReload(null)  // 置空防止原本状态和要修改的状态相同导致不刷新列表数据
    contactStateStore.setContactReload("REMOVE_CONTACT")
}

/* 加入黑名单 */
const blockContact = () => {
    // 确认框
    proxy.Confirm({
        message: "确定将该联系人加入黑名单吗？",
        okFun: async () => {
            let result = await proxy.Request({
                method: "post",
                url: proxy.Api.blockContact,
                params: {
                    contactId: userInfo.value.userId,
                }
            })
            if (!result) {
                return;
            }
            // 删除联系人并刷新联系人列表
            delContactData(userInfo.value.userId);
            proxy.Message.success("已将该联系人加入黑名单")
        }
    })
}

/* 删除联系人 */
const delContact = () => {
    // 确认框
    proxy.Confirm({
        message: "确定要删除该联系人吗？",
        okFun: async () => {
            let result = await proxy.Request({
                method: "put",
                url: proxy.Api.delContact,
                params: {
                    contactId: userInfo.value.userId,
                }
            })
            if (!result) {
                return;
            }
            // 删除联系人并刷新联系人列表
            delContactData(userInfo.value.userId);
            proxy.Message.success("已成功删除该联系人")
        }
    })
}

/* 发消息 */
const sendMessage = () => {
    // 去到聊天界面
    router.push({
        path: "/chat",
        query: {
            chatId: userInfo.value.userId,
            timestamp: new Date().getTime()  // 加上时间戳，因为需要其他组件监听变化的，只有userId可能路由没变化
        }
    })
}

</script>

<style lang="scss" scoped>
.user-info {
    position: relative;
    margin-top: 30px;

    .more-op {
        position: absolute;
        right: 0;
        top: 20px;

        .icon-gengduo {
            font-size: 15px;
            color: #3b3b3b;
            width: 30px;
            height: 20px;
            text-align: center;

            &:hover {
                background: #dddddd;
            }
        }
    }
}

.part-item {
    display: flex;
    border-bottom: 1px solid #eaeaea;
    padding: 20px 0;

    .part-title {
        width: 60px;
        color: #9e9e9e;
    }

    .part-content {
        flex: 1;
        margin-left: 15px;
        color: #161616;
    }
}

.send-message {
    width: 80px;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
    color: #7d8cac;
    padding: 5px;

    .icon-faxiaoxi {
        font-size: 40px;
    }

    .text {
        font-size: 13px;
        margin-top: 5px;
    }

    &:hover {
        background: #e9e9e9;
        cursor: pointer;
    }
}
</style>
